<template>
  <div>
    <div class="header">
      <span @click="fun()">&lt;</span>
      <span @click="fun()">x</span>
      <span>权益领取中心</span>
    </div>
    <div class="banner">
      <img src="img/zhangimg/chanpin/1.gif" alt="" />
    </div>
    <main>
      <h1>可领权益</h1>
      <img class="img1" src="img/zhangimg/chanpin/2.gif" alt="" />
      <h1>其他权益</h1>
      <div class="main">
        <figure>
          <img src="img/zhangimg/chanpin/3.gif" alt="" />
          <figcaption>5GPLUS</figcaption>
        </figure>
        <router-link to="/jiatinghuiyuan">
          <figure>
            <img src="img/zhangimg/chanpin/4.gif" alt="" />
            <figcaption>5G家庭会员</figcaption>
          </figure>
        </router-link>
        <figure>
          <img src="img/zhangimg/chanpin/5.gif" alt="" />
          <figcaption>全球通会员</figcaption>
        </figure>
        <figure>
          <img src="img/zhangimg/chanpin/6.gif" alt="" />
          <figcaption>5G直通车</figcaption>
        </figure>
      </div>
      <h1>本省特色</h1>
      <img class="img1" src="img/zhangimg/chanpin/7.gif" alt="" />
      <h1>热门推荐</h1>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          ><img src="img/zhangimg/chanpin/8.gif" alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img src="img/zhangimg/chanpin/9.gif" alt=""
        /></van-swipe-item>
      </van-swipe>
      <h1>包类权益<span>随心系、5G合约包</span></h1>
      <div class="hua">
        <img src="img/zhangimg/chanpin/10.gif" alt="" />
        <img src="img/zhangimg/chanpin/11.gif" alt="" />
        <img src="img/zhangimg/chanpin/12.gif" alt="" />
      </div>
      <h1>套餐权益<span>5G套餐权益</span></h1>
      <img class="img1" src="img/zhangimg/chanpin/13.gif" alt="" />
    </main>
    <footer>
      <span>——更多权益敬请期待——</span>
    </footer>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.header {
  width: 3.6rem;
  height: 0.5rem;
  line-height: 0.5rem;
}
.header span:nth-child(1) {
  margin: 0.2rem 0.2rem 0 0.14rem;
  font-size: 0.25rem;
}
.header span:nth-child(2) {
  margin-right: 1rem;
  font-size: 0.25rem;
}
.header span:nth-child(3) {
  font-size: 0.18rem;
  font-weight: 900;
}
.banner {
  width: 100%;
  height: 1.31rem;
}
.banner img {
  width: 100%;
  height: 1.31rem;
}
main {
  width: 3.6rem;
  margin-left: 0.14rem;
}
main h1 {
  width: 100%;
  height: 0.59rem;
  font-size: 0.12rem;
  line-height: 0.59rem;
}
main .img1 {
  width: 3.34rem;
  height: 0.96rem;
  margin-left: 0.15rem;
}
main .main {
  width: 3.6rem;
  height: 0.68rem;
  display: flex;
  justify-content: space-between;
  margin-left: 0.14rem;
}
main .main figure img {
  width: 0.48rem;
  height: 0.48rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 0.98rem;
  text-align: center;
}
.my-swipe .van-swipe-item img {
  width: 3.42rem;
  height: 0.98rem;
}
main h1 span {
  font-size: 0.1rem;
  color: #6a6a6a;
}
.hua {
  width: 3.6rem;
  height: 0.9rem;
  display: flex;
  align-items: center;
  flex: 1;
  overflow: auto;
}
.hua img {
  width: 1.65rem;
  height: 0.9rem;
  margin-right: 0.1rem;
}
footer {
  width: 100%;
  height: 1.5rem;
  text-align: center;
  line-height: 1.5rem;
  font-size: 0.12rem;
  color: #eaeaea;
}
</style>